<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .divtxt {
            width: 200px;
            margin: 100px auto;
            position: relative;

        }

        .txt {
            width: 200px;
            height: 20px;
        }

        .labeltxt {
            font-size: 10px;
            color: gray;
            display: block;
            line-height: 20px;
            height: 20px;
            position: absolute;
            left: 20px;
            top: 2px;
        }
    </style>
    <script>

      window.onload = function () {

          function $(div) {
              return document.getElementById(div);
          }
          $("txt").oninput = function () {
              if (this.value == "") {
                  // $("labeltxt").innerHTML = "请输入要查询的内容";
                  $("labeltxt").style.display = "block";

              } else {
                  // alert("aaaaaaa");
                  // $("labeltxt").innerHTML = "";
                  $("labeltxt").style.display = "none";
              }
              $("txt").onblur = function () {
                  this.value = "";
                  // $("labeltxt").innerHTML = "请输入要查询的内容";
                  $("labeltxt").style.display = "block";
              }
          }

      }
    </script>
</head>
<body>


<div class="divtxt">

    <input value="" id="txt" class="txt"/>
    <label for="txt" class="labeltxt" id="labeltxt">请输入要查询的内容</label>

</div>

</body>
</html>